<template>
  <div class="content">
    <div class="bg">
      <div class="header"><span>注</span><span>册</span></div>
      <div class="footer">
        <van-form @submit="onSubmit" class="registerform">
          <!-- <van-field
            v-model="userName"
            name="userName"
            label="用户名"
            placeholder="请输入真实姓名"
            :rules="[{ required: true, message: '请填写用户名' },{min:2,message:'姓名至少需要两位'}]"
          /> -->
          <van-field
            v-model="username"
            name="username"
            left-icon="phone-o"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确' },
            ]"
          />
          <van-field
            v-model="password"
            name="password"
            left-icon="eye-o"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px" class="btn">
            <van-button round block type="info" native-type="submit"
              >注册</van-button
            >
            <!-- <van-button round block type="default" @click="login"
              >登录</van-button
            > -->
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { register } from "@/api/login";
export default {
  data() {
    return {
      username: null,
      password: null,
    };
  },
  methods: {
    login() {
      this.$router.push({ path: "/ilogin" });
    },
    onSubmit(values) {
      console.log("submit", values);
      register(values)
        .then((res) => {
          // console.log(res);
          // this.$toast(res.msg);
          // this.$modal.msgSuccess(res.msg);
          if (res.code == "200") {
            Dialog.alert({
              title: "提示",
              message: "恭喜您：注册成功，是否立即登录?",
            }).then(() => {
              this.$router.push({path:"/ilogin",query:{iphone:values.username}});
            });
          }
        }).catch((error) => {
          console.log(error);
          // this.$toast.fail(Error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 15px;
  // background-color: #f8f8f8;
  background: url("../assets/images/reserve.png") no-repeat;
  background-size: 100%;
  background-position: center; /* 将背景图向上移动50% */
  .van-cell {
    font-size: 16px;
  }
}
::v-deep .van-cell {
  background: #ffffff00;
}
.bg {
  // background: #ffffffb4;
  border-radius: 8px;
}
::v-deep .van-field__label {
  color: #fff;
}
::v-deep .van-icon-phone-o {
  color: #fff;
}
::v-deep .van-icon-eye-o {
  color: #fff;
}
::v-deep .van-field__control {
  color: #ffffff;
}
::v-deep .van-button--default {
  color: #323233;
  background-color: #ffffff38;
  border: 1px solid #ebedf0;
}
.btn {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.header {
  font-size: 20px;
  margin: 100px 0 30px 0;
  padding-top: 18px;
  color: #fff;
  span {
    font-weight: 700;
    margin: 18px;
  }
}
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .registerform {
    width: 100%;
  }
}
</style>